<template>
    <view class="classlist">
        <view class="loadingLayout" v-if="!classifyList.length && !noData">
            <uni-load-more status="loading"></uni-load-more>
        </view>
        <view class="content">
            <navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classifyList"
                :key="item._id">
                <image :src="item.smallPicurl" mode="aspectFill"></image>
            </navigator>
        </view>
        <view class="loadingLayout" v-if="classifyList.length || noData">
            <uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
        </view>
    </view>

</template>

<script setup>
    import {
        ref
    } from 'vue';
    import {
        onLoad,
        onReachBottom
    } from '@dcloudio/uni-app'
    import {
        apiGetClsaaifyList,
        apiGetHisyoryList
    } from '../../api/apis.js';

    const prams = {
        pageNum: 1,
        pageSize: 12
    }
    onLoad((e) => {
        const {
            id = null, type = null, name = null
        } = e
        if (type) prams.type = type
        if (id) prams.classid = id

        getClassifyList()
        uni.setNavigationBarTitle({
            title: e.name
        })
    })
    const noData = ref(false)
    const classifyList = ref([])
    const getClassifyList = async () => {
        let res
        if (prams.classid)  res = await apiGetClsaaifyList(prams)

        if (prams.type)  res = await apiGetHisyoryList(prams)
        classifyList.value = [...classifyList.value, ...res.data]
        if (prams.pageSize >res.data.length) noData.value = true

        uni.setStorageSync('storgClassList', classifyList.value)


    }


    onReachBottom(() => {
        prams.pageNum++
        if (noData.value) return
        getClassifyList()
    })
</script>

<style lang="scss" scoped>
    .classlist {
        .content {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5rpx;
            padding: 5rpx;

            .item {
                height: 440rpx;

                image {
                    width: 100%;
                    height: 100%;
                    display: block;
                }


            }
        }
    }
</style>